<template>
  <div>
    <div class="select_top">
      <el-select
        clearable
        v-model="pblbData.pid"
        placeholder="请选择使用人"
        style="width:20%;margin-right:20px;"
      >
        <el-option
          v-for="item in userSelect"
          :key="item.hash.id"
          :label="item.hash.pname"
          :value="item.hash.id"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="pblbData.aid"
        placeholder="请选择设备"
        style="width:20%;margin-right:20px"
      >
        <el-option
          v-for="item in sbSelect"
          :key="item.hash.id"
          :label="item.hash.aname"
          :value="item.hash.id"
        ></el-option>
      </el-select>
      <el-date-picker
        style="width:25%;margin-right:10px"
        v-model="pblbData.date"
        type="daterange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button @click="getPblb">搜索</el-button>
      <el-button type="primary" style="float:right" @click="newRy" v-if="belongunit!='10'">新增</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="pblbList"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="hash.pname" label="使用人"></el-table-column>
      <el-table-column prop="hash.aname" label="设备名称"></el-table-column>
      <el-table-column prop="hash.auuid" label="设备ID"></el-table-column>
      <el-table-column prop="hash.begintime" label="开始时间"></el-table-column>
      <el-table-column prop="hash.endtime" label="结束时间"></el-table-column>
      <el-table-column label="操作" :width="belongunit!=10?'250':''">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="checkpb(scope.row)">查看</el-button>
          <el-button
            type="primary"
            size="small"
            @click="editRy(scope.row)"
            v-if="belongunit!='10'"
          >编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="deletery(scope.row)"
            v-if="belongunit!='10'"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    ></el-pagination>

    <el-dialog :title="diatitle" :visible.sync="showRy" width="50%">
      <el-form labelWidth="100px" v-loading="loading">
        <el-form-item label="使用人" class="is-required">
          <el-select
            v-model="newpbData.pid"
            placeholder="请选择"
            style="width:100%"
            v-validate="'required'"
            name="使用人"
          >
            <el-option
              v-for="item in userSelect"
              :key="item.hash.id"
              :label="item.hash.pname"
              :value="item.hash.id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('使用人') }}</div>
        </el-form-item>
        <el-form-item label="设备" class="is-required">
          <el-select
            v-model="newpbData.aid"
            placeholder="请选择"
            style="width:100%"
            v-validate="'required'"
            name="设备"
          >
            <el-option
              v-for="item in sbSelect"
              :key="item.hash.id"
              :label="item.hash.aname"
              :value="item.hash.id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('设备') }}</div>
        </el-form-item>
        <el-form-item label="使用时间" class="is-required">
          <el-date-picker
            style="width:100%"
            v-model="newpbData.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            v-validate="'required'"
            name="使用时间"
          ></el-date-picker>
          <div class="el-form-item__error">{{ errors.first('使用时间') }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="diatitle!=='查看排班'">
        <el-button @click="showRy = false">取 消</el-button>
        <el-button type="primary" @click="saveNewry" v-if="diatitle=='新增排班'">提 交</el-button>
        <el-button type="primary" @click="saveeidtRy" v-else>提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      belongunit: localStorage.getItem("belongunit"),
      loading: true,
      ts: this.newStore(),
      diatitle: "添加排班",
      showRy: false,
      orgname: localStorage.getItem("orgname"),
      pblbData: {
        pid: "",
        aid: "",
        date: ""
      },
      newpbData: {
        pid: "",
        aid: "",
        date: ""
      },
      pblbList: [],
      sbSelect: [],
      userSelect: []
    };
  },
  created() {
    this.getPblb();
    this.getSelect();
  },
  methods: {
    handleCurrentChange() {
      this.getPblb();
    },
    deletery(item) {
      const req = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7DEAA0F765F26818C2A3AEFC348622AF55",
        id: item.hash.id
      };
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.spost(this.ts, "/mainservlet", req).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getPblb();
            this.showRy = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    saveeidtRy() {
      this.$validator.validateAll().then(result => {
        if (result) {
          const req = {
            handle:
              "D4C22D9B0E4876FAD400B0C71B331F7D6655C600C04B1120A3AEFC348622AF55",
            pid: this.newpbData.pid,
            aid: this.newpbData.aid,
            begintime: this.newpbData.date[0],
            endtime: this.newpbData.date[1],
            id: this.newpbData.id
          };
          this.spost(this.ts, "/mainservlet", req).then(ts => {
            if (ts.d.data.operation1[0].hash.msg == "success") {
              this.$message({
                message: "修改成功！",
                type: "success"
              });
              this.getPblb();
              this.showRy = false;
            } else {
              this.$message({
                type: "error",
                message:
                  "该设备在此时间段已被" +
                  ts.d.data.operation1[0].hash.msg +
                  "占用！"
              });
            }
          });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },
    checkpb(item) {
      this.diatitle = "查看排班";
      this.loading = true;
      this.showRy = true;
      const req = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7D47F6D4E3C928837BCB307DE5BC55A6BB",
        id: item.hash.id
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.newpbData = ts.d.data.operation1[0].hash;
        this.newpbData.date = [
          ts.d.data.operation1[0].hash.begintime,
          ts.d.data.operation1[0].hash.endtime
        ];
        this.loading = false;
      });
    },
    editRy(item) {
      this.loading = true;
      this.diatitle = "编辑排班";
      this.showRy = true;
      const req = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7D47F6D4E3C928837BCB307DE5BC55A6BB",
        id: item.hash.id
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.newpbData = ts.d.data.operation1[0].hash;
        this.newpbData.date = [
          ts.d.data.operation1[0].hash.begintime,
          ts.d.data.operation1[0].hash.endtime
        ];
        this.loading = false;
      });
    },
    newRy(item) {
      this.diatitle = "新增排班";
      this.loading = true;
      this.newpbData = {};
      this.showRy = true;
      this.loading = false;
    },
    saveNewry() {
      this.$validator.validateAll().then(result => {
        if (result) {
          const req = {
            handle:
              "D4C22D9B0E4876FAD400B0C71B331F7DC7602B823173B0F9C5B962E259980E26",
            pid: this.newpbData.pid,
            aid: this.newpbData.aid,
            begintime: this.newpbData.date[0],
            endtime: this.newpbData.date[1]
          };
          this.spost(this.ts, "/mainservlet", req).then(ts => {
            if (ts.d.data.operation1[0].hash.msg == "success") {
              this.$message({
                message: "添加成功！",
                type: "success"
              });
              this.getPblb();
              this.showRy = false;
            } else {
              this.$message({
                type: "error",
                message:
                  "该设备在此时间段已被" +
                  ts.d.data.operation1[0].hash.msg +
                  "占用！"
              });
            }
          });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },
    getSelect() {
      const req = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7D709ECA131DD6D67818A0B411B7737DDA",
        pname: "",
        phone: "",
        orgname: "",
        start: "0",
        limit: "1000"
      };
      const req2 = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7D55376C8362D0D5243EC70856D48905AC75753A97F8032F38",
        amodel: "",
        orgname: "",
        status: "",
        auuid: "",
        start: "0",
        limit: "1000"
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.userSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, "/mainservlet", req2).then(ts => {
        this.sbSelect = ts.d.data.operation1;
      });
    },
    getPblb() {
      console.log(typeof(this.pblbData.date));
      if (this.pblbData.date == null) {
        this.pblbData.date = [];
      }
      const req = {
        handle:
          "D4C22D9B0E4876FAD400B0C71B331F7D47F6D4E3C928837B012084477059BDA5",
        start: (this.currentPage3 - 1) * this.pagesize,
        limit: this.pagesize,
        pid: this.pblbData.pid,
        aid: this.pblbData.aid,
        begintime: this.pblbData.date[0],
        begintime1: this.pblbData.date[0],
        endtime: this.pblbData.date[1],
        endtime1: this.pblbData.date[1]
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.pblbList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.w250 {
  width: 250px;
}

.select_top {
  width: 92%;
  margin: 20px auto;
}
</style>

